<!-- 提现 -->
<template>
	<view class="WithdrawInput">
		<view class="withdraw-input"></view>
		<view class="statistics por color-f">
			<view class="size-28 margin-bottom-12">可提现{{!selectIndex?'账户金额':'保证金'}}（元）</view>
			<view class="font-weight-600">
				<text class="size-36">￥</text> {{typeData[selectIndex].toFixed(2)}}
			</view>
			<navigator url="/packageColonel/bean-manag/detail-list?type=5" class="navigator size-24 dis poa">
				提现记录
			</navigator>
		</view>
		<view class="withdraw f-background">
			<view class="tag-nav text-align por">
				<image class="select poa" :class="{'select-index':selectIndex == 1}" src="@/static/img/sk.png" mode="">
				</image>
				<view class="nav-title color3 size-36 por" @click="selectIndex = 0,amount=''">
					<text :class="{'color font-weight-600':selectIndex == 0}">账户余额</text>
				</view>
				<view class="nav-title color3 size-36 por" @click="selectIndex = 1,amount=''">
					<text :class="{'color font-weight-600':selectIndex == 1}">保证金</text>
				</view>
			</view>
			<view class="balance">
				<view class="color0 size-24">提现余额</view>
				<view class="balance-input border-bottom dis-cen">
					<view class="dis-ali">
						<view class="size-60 color0 font-weight-600">￥</view>
						<input @input="onBalance" v-model="amount"
							class="input color3 size-60 margin-left-16 font-weight-600"
							placeholder-class="placeholder-class size-52 font-weight-400" type="digit"
							placeholder="请输入" />
					</view>
					<view class="font-weight-600 color size-24" @click="amount = typeData[selectIndex]">全部提现</view>
				</view>
				<view class="cashs dis-cen color0 size-32" @click="onJumpPage">
					<text>提现至</text>
					<view class="dis-ali">
						<text class="color3" v-if="infoBank.id">
							{{infoBank.bankName}}({{infoBank.bankCarNum.slice(infoBank.bankCarNum.length*1-4)}})
						</text>
						<text class="color3" v-else>添加银行卡</text>
						<text class="iconfont icon-right-1-copy color3 size-28 margin-left-10"></text>
					</view>
				</view>
				<u-button type="primary"
					:customStyle="{width: '100%',height: '96rpx',margin:'0 auto 20rpx', borderRadius: '12rpx'}"
					color="#EB0000" @click="postWithdrawAdd" :disabled="disabled">
					<text class="color-f font-weight-600 size-32">立即提现</text>
				</u-button>
				<view class="color-8 size-28">提现到账扣除个人所得税5%</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { OnlineStatic, GetBank, WithdrawAdd, DeliveryUserInfo } from '@/api/index'
	import { twoDecimalPlaces } from '@/utils/index'
	export default {
		data() {
			return {
				disabled: false,
				OnlineStatic,
				selectIndex: 0,
				amount: '',
				infoBank: {},
				typeData: { 0: 0, 1: 0 }
			}
		},
		onShow() {
			this.getGetBank()
			this.postDeliveryUserInfo()
		},
		methods: {
			async getGetBank() {
				const { code, data } = await GetBank()
				if (code == '200') {
					this.infoBank = data || {}
				}
			},
			async postDeliveryUserInfo() {
				const { code, data } = await DeliveryUserInfo()
				if (code == '200') {
					this.typeData[0] = data.amount
					this.typeData[1] = data.cashPledge
				}
			},
			// 提现
			async postWithdrawAdd() {
				let tis = ''
				if (!this.amount) tis = '请输入需要提现的金额'
				else if (!this.infoBank) tis = '请选择提现银行卡'
				if (tis) {
					uni.$u.toast(tis, 1000)
					return
				}
				let params = {
					amount: this.amount,
					withdrawType: this.selectIndex * 1 + 2
				}
				this.disabled = true
				const { code, data } = await WithdrawAdd(params)
				if (code == '200') {
					uni.$u.toast('申请成功，请等待审核', 1500)
					setTimeout(()=> {
						uni.navigateBack({})
					},1600)
				} else this.disabled = false
			},
			onBalance(e) {
				this.$nextTick(() => {
					this.amount = twoDecimalPlaces(e.detail.value)
				})
				console.log(e.detail.value)
			},
			onJumpPage() {
				uni.navigateTo({
					url: '/packageGrid/bank-card/bank-card'
				});
			}
		}
	}
</script>

<style lang="scss">
	.WithdrawInput {
		padding: 0 24rpx;

		.withdraw-input {
			width: 100vw;
			height: 510rpx;
			margin-left: -24rpx;
			background: linear-gradient(180deg, #EB0000 61%, rgba(235, 0, 0, 0) 100%);
		}

		.placeholder-class {
			color: #9E9E9E;
		}

		.statistics {
			padding: 24rpx 0;
			margin-top: -480rpx;
			width: 100%;

			.font-weight-600 {
				font-size: 72rpx;
			}

			.navigator {
				width: 180rpx;
				height: 64rpx;
				right: 0;
				top: 24rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 100rpx;
				border: 1px solid #ffffff;
			}
		}

		.withdraw {
			border-radius: 24rpx;
			overflow: hidden;

			.tag-nav {
				display: grid;
				grid-template-columns: repeat(2, 50%);
				background: #FFDADA;

				.select-index {
					right: 0;
					top: 0;
					transform: scaleX(-1);
				}

				.select {
					width: 390rpx;
					height: 100rpx;
				}

				.nav-title {
					height: 101rpx;
					line-height: 101rpx;
				}
			}

			.balance {
				padding: 24rpx 24rpx 36rpx;

				.cashs {
					padding: 52rpx 0;
				}

				.balance-input {
					padding-top: 16rpx;

					.input {
						width: 470rpx;
						height: 104rpx;
					}
				}
			}
		}

	}
</style>